<template>
  <div class="cate">
    <el-button icon="el-icon-circle-plus-outline" @click="add">添加</el-button>
    <vList @edit="editCate"></vList>
    <vInfo :info="info" ref="info"></vInfo>
  </div>
</template>

<script>
import vList from "./list";
import vInfo from "./info";
export default {
  components: {
    vList,
    vInfo,
  },
  data() {
    return {
      info: {
        isShow: false,
        isAdd: false,
      },
    };
  },
  methods: {
    add() {
      // 打开添加的弹窗
      this.info.isAdd = true;
      this.info.isShow = true;
       this.$refs.info.getList();
    },
    editCate(val) {
      // 在父组件中调用子组件的方法
      this.$refs.info.setStatus({ ...val });
      this.info.isAdd = false;
      this.info.isShow = true;
    },
  },
};
</script>

<style>
</style>